<template>
  <view>
    <!-- 电子签名信息 -->
    <uni-popup ref="popup" backgroundColor="#fff" class="mesageSign_popup">
      <view class="sign_dialog">
        <p class="phone_sign">电子签名验证</p>
        <view class="sign_bg">
          <span><i class="iconfont" style="margin:0 10rpx 0;color: #00a660;font-size: 26rpx;">&#xe69e;</i>签名有效</span>
          <button size="mini" class="getSign_btn" @click="getSignCA">查看证书信息</button>
        </view>
        <!-- 获取CA证书 -->
        <uni-popup ref="CApopup" class="ca-popup">
          <img src="../../static/images/CA.png" alt="" class="CAImg">
          <view class="ca_msg">
            <uni-row type="flex" justify="center" :gutter="24">
              <uni-col :span="10" style="text-align: right;">使用者</uni-col>
              <uni-col :span="12" style="text-align: left;">
                <div style="line-height: 35rpx;margin-top:12rpx;">
                  {{ contactFlow.signCompany }}<br/>@{{certInfo.idNumber}}
                </div>
              </uni-col>
            </uni-row>
            <uni-row type="flex" justify="center" :gutter="20">
              <uni-col :span="10" style="text-align: right;">颁发者</uni-col>
              <uni-col :span="12" style="text-align: left;"> {{certInfo.cnName}}</uni-col>
            </uni-row>
            <uni-row type="flex" justify="center" :gutter="20">
              <uni-col :span="10" style="text-align: right;">证书序列号</uni-col>
              <uni-col :span="12" style="text-align: left;">
                <div style="line-height: 35rpx;margin-top:12rpx;width: 100%;word-break: break-all;">
                  {{certInfo.sn}}
                </div>
              </uni-col>
            </uni-row>
            <uni-row type="flex" justify="center" :gutter="20">
              <uni-col :span="10" style="text-align: right;">有效起止日期</uni-col>
              <uni-col :span="12" style="text-align: left;">{{certInfo.createTime}} +08'00'</uni-col>
            </uni-row>
            <uni-row type="flex" justify="center" :gutter="20">
              <uni-col :span="10" style="text-align: right;">有效截止日期</uni-col>
              <uni-col :span="12" style="text-align: left;">{{certInfo.overTime}} +08'00'</uni-col>
            </uni-row>
            <uni-row type="flex" justify="center" :gutter="20">
              <uni-col :span="10" style="text-align: right;">签名算法</uni-col>
              <uni-col :span="12" style="text-align: left;">SHA256</uni-col>
            </uni-row>
          </view>
        </uni-popup>
        <!-- <p class="phone_s">电子签名信息</p> -->
        <view class="bg_bor">
          <p>电子签名信息</p>
          <p>签名人：{{ contactFlow.signCompany }}@{{certInfo.idNumber}}</p>
          <p>时间戳：签名包含嵌入的可信时间戳</p>
          <p>CA证书：签名者身份已签发权威CA证书</p>
          <p>签名时间：{{ contactFlow.sealTime }}+08'00'</p>
          <p>签署原因：我同意签署该文件，并承认电子签名的法律效力！</p>
        </view>
        <view class="bg_bor">
          <p>法律效力结论</p>
          <p>1.符合中国《电子签名法》第十三条中可靠电子签名的规定</p>
          <p>2.自签名人签署后，电子签名未被更改</p>
          <p>3.自签名人签署后，由电子签名保护的文档内容未被更改</p>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {getContractSignMine} from "@/api/ec/work/contract/contractSign";
import {getCertInfo} from "../../api/ec/work/contract/contract";

export default {
  name: 'caDialog',
  props: {
    value: [String, Object, Array],
    // 签署流程id
    flowId: {
      type: Number,
    },
  },
  data() {
    return {
      //签署流程
      contactFlow: {},
      certInfo:{},// 证书信息
    }
  },
  methods: {
    open() {
      this.$refs.popup.open('center')
      this.$nextTick(() => {
        this.initData();
      });
    },
    initData() {
      // 根据签署流程id 查询签署流程
      getContractSignMine(this.flowId).then((response)=>{
        this.contactFlow = response.data;
        getCertInfo(this.contactFlow.sealerId,this.contactFlow.systemCompanyId,this.contactFlow.contractId).then((response)=>{
          this.certInfo = response.data;
        });
      });
    },
    /** 获取证书 */
    getSignCA() {
      this.$refs.CApopup.open('center')
    },
  }
}
</script>

<style scoped lang="scss">
.ca_msg {
  line-height: 60rpx;
  position: absolute;
  top: 210rpx;
  border: none;
  overflow: hidden;
  color: #666666;
  width: 83%;
  left: 2%;
}

.CAImg {
  width: 90%;
  height: 800rpx;
}

.mesageSign_popup ::v-deep .uni-popup__wrapper {
  width: 90%;
  border-radius: 10rpx;
}

.ca-popup ::v-deep .uni-popup__wrapper {
  width: 90%;
  text-align: center;
}

.sign_dialog {
  padding: 30rpx 40rpx;

  .phone_sign {
    border-bottom: 1rpx solid #cccccc;
    font-size: 28rpx
  }

  .phone_s {
    margin-top: 14rpx;
    color: #999999;
  }

  p {
    padding: 6rpx 0;
    color: #666666;
  }

  .bg_bor {
    background: #f7f8f8;
    padding: 11rpx 16rpx;
    margin-top: 25rpx;
  }
}

// 签名有效
.sign_bg {
  background-color: #e9f7ed;
  color: #666666;
  margin-top: 25rpx;
  font-size: 26rpx;
  padding: 11rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .getSign_btn {
    margin: 0;
    background: #fff;
    border: none;
    color: #666666;
    font-size: 24rpx
  }
}
</style>
